<template>
  <div class="newbieTutorial flx-align-center toolBar-icon" @click.prevent.stop="driverObj.drive()">
    <el-icon class="toolBar-icon" size="21"><Odometer /></el-icon>
  </div>
</template>

<script setup lang="ts">
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';

const driverObj = driver({
  allowClose: true,
  doneBtnText: '结束',
  nextBtnText: '下一步',
  prevBtnText: '上一步',
  steps: [
    {
      element: '#collapseIcon',
      popover: {
        title: '',
        description: '菜单栏折叠，打开或者关闭菜单栏',
        side: 'right'
      }
    },
    {
      element: '#tabsmenutrag',
      popover: {
        title: '',
        description: '已打开的页面，点击可以跳转，拖拽可以排序页面位置',
        side: 'right'
      }
    },
    {
      element: '#menumorebutton',
      popover: {
        title: '',
        description: '更多菜单，点击可以打开更多菜单,可以对标签页面操作',
        side: 'right'
      }
    },
    {
      element: '#breadcrumb',
      popover: {
        title: '',
        description: '菜单导航栏，点击可以回到某一个菜单，也可以详细看到当前页面位置',
        side: 'bottom'
      }
    },
    {
      element: '#refresh',
      popover: {
        title: '',
        description: '刷新当前页面',
        side: 'left'
      }
    },
    {
      element: '#assemblySize',
      popover: {
        title: '',
        description: '可以切换组件大小，方便查看',
        side: 'left'
      }
    },
    {
      element: '#language',
      popover: {
        title: '',
        description: '中英文切换',
        side: 'left'
      }
    },
    {
      element: '#searchMenu',
      popover: {
        title: '',
        description: '菜单搜索，可以快速找到菜单',
        side: 'left'
      }
    },
    {
      element: '#themeSetting',
      popover: {
        title: '',
        description: '主题设置，可以切换主题颜色，切换暗黑模式，可以自己选择样式哦！喜欢什么选什么只有自己能看到',
        side: 'left'
      }
    },
    {
      element: '#message',
      popover: {
        title: '',
        description: '消息通知，可以查看消息通知',
        side: 'left'
      }
    },
    {
      element: '#fullscreen',
      popover: {
        title: '',
        description: '全屏，点击可以全屏',
        side: 'left'
      }
    },
    {
      element: '#newbietutorial',
      popover: {
        title: '',
        description: '新手教程，点击可以打开新手教程引导',
        side: 'left'
      }
    }
  ]
});
</script>

<style lang="scss" scoped>
.newbieTutorial {
  cursor: pointer;
}
</style>
